<template>
  <el-card class="box-card">
    <div class="companys-adm">
      <!-- 新增按钮 -->
      <el-button type="primary" class="addBtn" size="medium" @click=" isaddCompanyShow=true">新增企业</el-button>
      <!-- 操作部分 -->
      <el-row :gutter="24">
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <span class="handle-span">标签名称</span>
            <el-select class="selectInput" v-model="operationObj.tagsValue" placeholder="请选择">
              <el-option v-for="(item,index) in tags" :key="index" :value="item"></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="bg-purple-light citySelect">
            <atom-city :label="'企业所在地'" v-model="operationObj" ref="resetCountry"></atom-city>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <span class="handle-span">企业简洁</span>
            <el-input v-model="operationObj.introInput" placeholder="请输入内容" class="adress"></el-input>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <span class="handle-span">状态</span>
            <el-select class="statusSelect" v-model="operationObj.statusValue" placeholder="请选择">
              <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple clearBtn">
            <el-button @click="clearOperationObj">清除</el-button>
            <el-button type="primary" @click="searchCompanys">搜索</el-button>
          </div>
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <el-table :data="companyList" stripe style="width: 100%" border>
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="number" label="企业编号" width="280"></el-table-column>
        <el-table-column prop="shortName" label="企业简称" width="150"></el-table-column>
        <el-table-column prop="company" label="行业" width="150"></el-table-column>
        <el-table-column prop="creatorID" label="创建者" width="80"></el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="180">
          <!-- 利用插槽将每一行的时间都加上时间的过滤器 -->
          <template v-slot="slotScope">{{slotScope.row.addDate | formatTime}}</template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注"></el-table-column>
        <el-table-column prop="state" label="状态" width="80">
          <template v-slot="slotScope">
            <span v-if="slotScope.row.state===1" size="small">启用</span>
            <span v-else size="small">禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" class="handlebtn" width="160">
          <template v-slot="slotScope">
            <el-button type="text" @click="editCompany(slotScope.row)" :disabled="slotScope.row.state===1?false:true">修改</el-button>
            <el-button type="text" @click="forbiddenDate(slotScope.row)">禁用</el-button>
            <el-button type="text" @click="deleteCompany(slotScope.row.id)" :disabled="slotScope.row.state===1?false:true">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区 -->
      <div class="fenye">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-sizes="[1, 3, 5, 10]" :page-size="queryInfo.pagesize" layout=" ->,total,prev, pager, next , sizes, jumper" :total="total" background></el-pagination>
      </div>

      <!-- 新增企业弹窗 -->
      <el-dialog title="新增企业" :visible.sync="isaddCompanyShow" width="50%" class="addCompanysDialog">
        <add-companys @addData="addCompanys" @close="isaddCompanyShow=false"></add-companys>
      </el-dialog>
      <!-- 修改企业的弹窗 -->
      <el-dialog title="修改企业" :visible.sync="iseditCompanyShow" width="50%">
        <edit-companys :currentData="currentData" @close="iseditCompanyShow=false" @editData="editcompanys"></edit-companys>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
// 引入添加企业的弹出框
import addCompanys from './add-companys';

// 引入修改企业的弹窗
import editCompanys from './edit-companys';

// 导入获取企业管理列表的方法,导入删除企业的方法
import { getCompanysList, deleteCompanys } from '@/assets/api/companys';

import atomCity from './atom-city';
export default {
  name: 'companysAdm',
  components: {
    addCompanys,
    editCompanys,
    atomCity,
  },
  props: {},
  created () {
    this.getCompanys();
    this.getCompanysTags();
  },
  data () {
    return {
      // 将操作部分的数据都放到一个对象中
      operationObj: {
        // 选中的标签
        tagsValue: '',
        // 状态绑定的数据
        statusValue: '',
        // 省绑定的数据
        province: '',
        // 市对应的数据
        city: '',
        // 企业简介数据
        introInput: '',
      },
      // 标签名称数组
      tags: [],
      // 定义状态的对象
      status: [
        {
          value: '0',
          label: '禁用',
        },
        {
          value: '1',
          label: '启用',
        },
      ],
      // 定义请求参数项
      queryInfo: {
        // 当前页码
        page: 1,
        // 每页显示条数
        pagesize: 5,
      },
      // 企业总数量
      total: 0,

      // 获取到的比表格数据列表
      companyList: [],
      // 定义要绑定的对像
      companysRuleForm: {},
      // 定义新增企业弹出框的显示与隐藏
      isaddCompanyShow: false,

      // 定义修改按钮的弹出框的显示与隐藏
      iseditCompanyShow: false,
      // 当前点击的数据对象
      currentData: {},
    };
  },
  computed: {},
  mounted () { },
  methods: {
    // 获取企业管理列表
    async getCompanys () {
      try {
        const { data } = await getCompanysList(this.queryInfo);
        // 将获取到的数据存入本地
        this.companyList = data.items;
        // 总数据条数绑定一下
        this.total = data.counts;
      } catch (err) {
        this.$message.error('获取数据失败,请重试');
      }
    },
    // 搜索企业列表
    async searchCompanys () {
      try {
        const { data } = await getCompanysList({
          page: this.queryInfo.page,
          pagesize: this.queryInfo.pagesize,
          tags: this.operationObj.tagsValue,
          province: this.operationObj.province,
          city: this.operationObj.city,
          shortName: this.operationObj.introInput,
          state: this.operationObj.statusValue,
        });
        this.companyList = data.items;
        // 总数据条数绑定一下
        this.total = data.counts;
      } catch (err) {
        this.$message('失败！');
      }
    },

    // 获取企业列表获取tags数组
    async getCompanysTags () {
      try {
        const { data } = await getCompanysList({
          pagesize: 50,
          tags: this.operationObj.tagsValue,
        });
        // 对数组遍历
        data.items.forEach((element) => {
          // 将数据检索一下追加到数组中
          if (this.tags.indexOf(element.tags) === -1) {
            this.tags.push(element.tags);
          }
        });
      } catch (err) {
        this.$message('失败！');
      }
    },

    // pageSize 改变时会触发
    handleSizeChange (newSize) {
      // console.log(newSize);
      this.queryInfo.pagesize = newSize;
      this.getCompanys();
    },

    // currentPage 改变时会触发
    handleCurrentChange (nawPage) {
      // console.log(nawPage);
      this.queryInfo.page = nawPage;
      this.getCompanys();
    },

    // 点击修改按钮
    editCompany (row) {
      this.currentData = row;
      this.iseditCompanyShow = true;
    },
    // 操作行的清除按钮
    clearOperationObj () {
      // 清除数据列表的数据
      this.operationObj = {};
      // 重新刷新页面
      this.getCompanys();
    },

    // 为列表追加元素
    addCompanys () {
      this.getCompanys();
    },
    // 修改数据对象
    editcompanys () {
      this.getCompanys();
    },
    // 禁用按钮
    forbiddenDate (row) {
      if (row.state === 1) {
        row.state = 0;
      } else {
        row.state = 1;
      }
    },
    // 删除按钮的事件
    deleteCompany (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
          // 发送请求
          try {
            await deleteCompanys(id);
            // 刷新页面
            this.getCompanys();
          } catch (err) {
            this.$message.error('删除数据失败！');
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
  },
};
</script>

<style lang='less' scoped>
.fenye {
  margin: 20px;
}
.companys-adm {
  font-size: 14px;
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .grid-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .clearBtn {
    display: flex;
    justify-content: flex-end;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f2f2f2;
  }
  .addBtn {
    margin-bottom: 20px;
  }
  .handle-span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    padding: 0 10px;
    height: 40px;
    font-size: 12px;
    background-color: #f2f2f2;
  }
  .el-pagination {
    margin-top: 10px;
  }
}
.atom-city {
  /deep/.el-form-item__label {
    line-height: 40px;
    background-color: #f2f2f2;
  }
  /deep/.el-form-item__content {
    line-height: unset;
  }
  /deep/ .el-form-item {
    .el-form-item__label {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: unset;
      padding: 0 10px;
    }
  }
}
</style>
